<template>
      <comNavigation>
      <template v-slot:title>
        开药问诊
      </template>
    </comNavigation>
    <div style="background-color: #fff7eb;color:#f2994a;text-align: center; height: 40px;line-height: 40px;font-size: 12px;">
        请如实填写资料以便医生了解您的病情和用药需求
    </div>
  <div class="father">

    <p style="font-size: 16px;">症状描述</p>
    <comTextarea @onChange="onChange" />
    <p style="font-size: 16px;">用药人身体情况 </p>
    <div>
      <p style="color: #45474b;">肝功能</p>
      <van-tag @click="ggn = 1" :class="ggn == 1 ? 'active' : ''" class="tag" size="medium">正常</van-tag>
      <van-tag @click="ggn = 2" :class="ggn == 2 ? 'active' : ''" class="tag" size="medium">异常</van-tag>
      <van-tag @click="ggn = 3" :class="ggn == 3 ? 'active' : ''" class="tag" size="medium">不清楚</van-tag>
    </div>
    <div>
      <p style="color: #45474b;">肾功能</p>
      <van-tag @click="sgn = 1" :class="sgn == 1 ? 'active' : ''" class="tag" size="medium">正常</van-tag>
      <van-tag @click="sgn = 2" :class="sgn == 2 ? 'active' : ''" class="tag" size="medium">异常</van-tag>
      <van-tag @click="sgn = 3" :class="sgn == 3 ? 'active' : ''" class="tag" size="medium">不清楚</van-tag>
    </div>
    <div>
      <p style="color: #45474b;">过敏史</p>
      <van-tag @click="gms = 1" :class="gms == 1 ? 'active' : ''" class="tag" size="medium">标签</van-tag>
      <van-tag @click="gms = 2" :class="gms == 2 ? 'active' : ''" class="tag" size="medium">异常</van-tag>
      <van-tag @click="gms = 3" :class="gms == 3 ? 'active' : ''" class="tag" size="medium">不清楚</van-tag>
    </div>
    <div>
      <p style="color: #45474b;">生于状态及计划</p>
      <van-tag @click="sy = 1" :class="sy == 1 ? 'active' : ''" class="tag" size="medium">无</van-tag>
      <van-tag @click="sy = 2" :class="sy == 2 ? 'active' : ''" class="tag" size="medium">备孕中</van-tag>
      <van-tag @click="sy = 3" :class="sy == 3 ? 'active' : ''" class="tag" size="medium">已怀孕</van-tag>
      <van-tag @click="sy = 4" :class="sy == 4 ? 'active' : ''" class="tag" size="medium">哺乳期中</van-tag>
    </div>
    <div>
      <p style="color: #45474b;">补充病例信息</p>
      <comUploader :fn="postUploadAPI" />
    </div>
    <div>
      <comNextButton @onClick="add" :disabled="mask" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 导航组件
import comNavigation from '@/components/common/com-navigationBar/com-navigation.vue';

import comTextarea from '@/components/common/com-textArea/com-textArea.vue'
import comUploader from '@/components/common/com-uploader/com-uploader.vue';
import comNextButton from '@/components/common/com-nextButton/com-nextButton.vue';
import { postUploadAPI } from '@/api/doctorDetail'
import { ref ,computed} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter()

const ggn = ref(0)
const sgn = ref(0)
const gms = ref(0)
const sy = ref(0)

let value=ref()
function onChange(val: any) {
  value.value=val
}

import {getpatientMyListAPI} from '@/api/my'
function add(){
  getpatientMyListAPI()
  router.push('/choosePatient')
}

const mask = computed(()=>{
  if(value.value !== '' && ggn.value!==0 && sgn.value!==0 && gms.value!==0 &&sy.value!==0){
    return false
  }else{
    return  true
  }
})


</script>

<style scoped lang="scss">
.active {
  background-color: #e9f7f6 !important;
  color: #2cb5a5 !important;
}

.father {
  width: 90%;
  height: 100vh;
  padding: 15px;

  .tag {
    padding: 6px 10px;
    color: black;
    background-color: #f5f5f5;
    margin: 10px 15px;
  }
}
</style>
